<!-- 共享专区 -->
<template>
  <view class="container">
    <div class="tipsbox">
      共享简介：智慧环保，资源重塑，闲置物品，共享使用。所有用户可使用自己的金币进行商品的兑换，所有商品不分贵贱，各求所需，商品兑换前记得先与卖家沟通哦！
    </div>
    <view class="selectbox">
      <view class="rangeselectbox">
        <uni-data-select v-model="rangevalue" placeholder="距离选择" :localdata="ranges" @change="rangechange"></uni-data-select>
        <view class="icon">
          <image src="/static/images/home/icon_select.png"></image>
        </view>
      </view>
      <view class="typeselectbox">
        <uni-data-select v-model="typevalue" placeholder="品类选择" :localdata="types" @change="typechange"></uni-data-select>
        <view class="icon">
          <image src="/static/images/home/icon_select.png"></image>
        </view>
      </view>
    </view>
    <scroll-view scroll-y="true" :style="{height: wh+'px'}">
      <view class="goodsbox flex flex-colum">
        <view class="itembox flex flex-start" v-for="(item, index) in goodslist" :key="index" @click="goodsClick(item)">
          <image class="goods-image" :src="item.image" mode="aspectFill"></image>
          <view class="txtbox flex flex-colum space-around align-items-top">
            <view class="name">商品名称：{{formatProductName(item.goodsname)}}</view>
            <view class="doc">{{item.goodsdetail}}</view>
            <view class="location flex space-between">
				<view class="type-info">{{ item.goodstype }}</view>

              <view class="distance">
                <image class="icon-location" src="@/static/images/home/icon_location.png" mode=""></image>
                <text>{{item.juli}}km</text>
              </view>
              <text class="value"><text style="color: #E81456;font-size: 40rpx">1</text>金币</text>
            </view>
          </view>
        </view>
        <!-- 没有更多了 start -->
        <view class="no-more">~客官已经到底了~</view>
        <!-- 没有更多了 end -->
      </view>
    </scroll-view>
  </view>
</template>

<script>
import {formatProductName} from "../../utils/common";

var self, mapCtx

export default {
  name: "sharedzone",
  data(){
    return{
      mediaUrl: uni.$http.mediaUrl,
      goodslist: [],
      rangevalue: '',
      ranges: [{
        value: 0,
        text: "全部"
      }, {
        value: 1,
        text: "1公里内"
      }, {
        value: 2,
        text: "3公里内"
      }, {
        value: 3,
        text: "5公里内"
      }],
      typetext: "全部",
      typevalue: '',
      types: [{
        value: 0,
        text: "全部"
      },
        {
          value: 1,
          text: "家用电器"
        }, {
          value: 2,
          text: "数码设备"
        }, {
          value: 3,
          text: "电脑办公"
        },
        {
          value: 4,
          text: "家具"
        }, {
          value: 5,
          text: "图书"
        }, {
          value: 6,
          text: "母婴玩具"
        },
        {
          value: 7,
          text: "服饰"
        }, {
          value: 8,
          text: "美妆"
        }, {
          value: 9,
          text: "食品"
        }, {
          value: 10,
          text: "其他"
        }
      ],
      location: {
        latitude: 33.002125,
        longitude: 112.495972,
        address: '卧龙区舒心园'
      },
      page: 0, //page代表开始的id.从哪开始往后查,一次返回十个
      searchKey: '',
    }
  },
  onPullDownRefresh(e) {
    console.log("上拉")
    self.goodslist = [];
    self.page = 0;
    this.getGoodsList();
  },
  onLoad() {
    const sysInfo = uni.getSystemInfoSync()
    this.wh = sysInfo.windowHeight - 300
    self = this
    // 获取当前map
    mapCtx = wx.createMapContext('idMap')
    this.videoshow = true
    uni.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"]
    })

  },
  onShow() {
    self.goodslist = [];
    self.page = 0;
    this.getAuthorizeInfo()

    setTimeout(() => {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 0
      });
    }, 50);

  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function onReachBottom() {
    // 触发加载中效果
    this.searchLoading = true,
        this.searchLoadingComplete = true
    this.getGoodsList();
    this.searchLoading = false;
    this.searchLoadingComplete = false;

  },
  methods: {
    formatProductName,
    // 位置授权
    getAuthorizeInfo() {
      uni.authorize({
        scope: 'scope.userLocation',
        success() { // 允许授权
          console.log("你已经允许授权")
          self.getLocationInfo();
        },
        fail() { // 拒绝授权
          self.openConfirm();
          console.log("你拒绝了授权")
        }
      })
    },
    // 再次获取授权，当用户第一次拒绝后再次请求授权
    openConfirm() {
      uni.showModal({
        title: '请求授权当前位置',
        content: '需要获取您的地理位置，请确认授权',
        success: (res) => {
          if (res.confirm) {
            uni.openSetting(); // 打开地图权限设置
          } else if (res.cancel) {
            uni.showToast({
              title: '您拒绝了授权，无法获得周边信息',
              icon: 'none',
              duration: 3000
            })
          }
        }
      });
    },
    // 位置授权成功后，自动获取地理位置经纬度
    getLocationInfo() {
      uni.getLocation({
        type: 'gcj02',
        success(res) {
          self.location.latitude = res.latitude;
          self.location.longitude = res.longitude;
          // 每次进来先清空,然后重新加载
          self.getGoodsList()
        },
        fail(res){
          console.log(res)
        }
      });
    },
    goodsClick(item) {
      if (uni.getStorageSync('hasLogin')) {
        uni.navigateTo({
          url: '/pages/home/goodsdetail?goodsid=' + item.goodsid + '&juli=' + item.juli
        })
      } else {
        uni.showToast({
          icon: 'none',
          title: '登陆后可体验更多功能~',
          duration: 2000
        })
        setTimeout(() => {
          this.showlogin = true
        }, 1000);
      }

    },
    rangechange(e) {
      this.rangevalue = e
      //回到顶部
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 0
      });
      this.page = 0;
      this.goodslist = [];
      this.getGoodsList();
    },
    typechange(e) {
      this.typevalue = e
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 0
      });
      var obj = this.types.find(function(i) {
        return i.value === e; //筛选出匹配数据
      });
      this.typetext = obj ? obj.text : '';
      this.page = 0;
      this.goodslist = [];
      this.getGoodsList();
    },
    async getGoodsList() {
      uni.showLoading({
        title: '加载中'
      });
      const postmsg = {
        searchKey: this.searchKey,
        wei: parseFloat(this.location.latitude),
        jing: parseFloat(this.location.longitude),
        page: this.page,
        type: 1,
        juli: this.rangevalue == '' ? 0 : this.rangevalue,
        leibie: this.typetext == '' ? '全部' : this.typetext
      }
      const {
        data: res
      } = await uni.$http.post('getGoodsList/', postmsg)
      if (res.code == 200) {
        uni.stopPullDownRefresh();
        setTimeout(function() {
          if (res.data.length > 0) {
            var goodslist1 = []
            //不应该取最后一个, 应该取最大的id
            // self.page = res.data[res.data.length - 1].id

            self.goodslistnum = res.data.length
            var dest = [];
            self.page = res.data[0].id
            for (let i = 0; i < res.data.length; i++) {

              if (res.data[i].id < self.page) {
                self.page = res.data[i].id
              }

              var obj = {}
              obj.id = res.data[i].id;
              obj.goodstype = res.data[i].goodstype
              obj.goodsid = res.data[i].goodsid
              obj.goodsname = res.data[i].goodsname
              obj.goodsdetail = res.data[i].goodsdetail
              obj.imagelist = JSON.parse(res.data[i].imagelist);
              obj.image = obj.imagelist[0]
              obj.date = res.data[i].date
			  obj.money = res.data[i].money
			  obj.type = res.data[i].type
              // obj.username = res[i].username
              // obj.nickname = unescape(res[i].nickname)
              obj.address = res.data[i].address
              obj.latitude = res.data[i].latitude
              obj.longitude = res.data[i].longitude
              obj.juli = res.data[i].juli;
              goodslist1.push(obj)
            }
            goodslist1.sort((a, b) => (a.juli - b.juli))
            self.goodslist = self.goodslist.concat(goodslist1)

          }
          uni.hideLoading();
        }, 300);


      } else {
        // uni.hideLoading();
        uni.showToast({
          icon: 'none',
          title: '系统繁忙中，请稍后再试...',
          duration: 1000
        })
      }
    },
  }
}
</script>

<style lang="scss" >
	.type-info {
		display: inline-block;
		color: #7780C8;
		padding: 5rpx 25rpx;
		// margin-top: 10rpx;
		font-size: 24rpx;
		border-radius: 28rpx;
		background: rgb(233, 235, 254);
	}
.container{
  .tipsbox{
    padding: 22rpx 26rpx;
    border-radius: 20rpx;
    background: #F7F2FF;
    font-size: 26rpx;
    color: #6B59B2;
    line-height: 1.5;
    text-align: justify;
  }
  .selectbox {
    display: flex;
    justify-content: center;
    padding: 20rpx 38rpx 0;

    .rangeselectbox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      position: relative;
      .icon{
        position: absolute;
        right: 40rpx;
        bottom: 10rpx;
        image{
          width: 18rpx;
          height: 18rpx;
        }
      }
      uni-data-select {
        width: 340rpx;
        color: #000;
        .uni-select{
          border-radius: 34rpx 0px 0px 34rpx;
          border: 1px solid rgb(191, 196, 242);
          height: 56rpx;
          .uni-select__input-box{
            height: 56rpx;
          }
          .uni-select__selector{
            width: 240rpx;
            position: absolute;
            top: calc(100% + 10rpx);
            left: 100rpx;
            color: #5553AA;
            padding: 0 20rpx;
            .uni-popper__arrow{
              left: 75%
            }
            .uni-select__selector-item{
              text-align: center;
              border-bottom: 1rpx solid #BDC3FE;
              text{
                width: 90%;
              }
              &:last-child{
                border-bottom: none;
              }
            }
          }
        }
        .uni-select__input-text {
          color: #5553AA;
          transform: translateX(-20rpx);
          font-size: 24rpx;
        }
        .uni-icons{
          display: none;
        }
      }
    }

    .typeselectbox {
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      position: relative;
      .icon{
        position: absolute;
        right: 40rpx;
        bottom: 10rpx;
        image{
          width: 18rpx;
          height: 18rpx;
        }
      }
      uni-data-select {
        width: 340rpx;
        color: #000;
      }
      .uni-select{
        border-radius: 0rpx 34px 34px 0rpx;
        border: 1px solid rgb(191, 196, 242);
        height: 56rpx;
        .uni-select__input-box{
          height: 56rpx;
        }
        .uni-select__selector{
          width: 240rpx;
          position: absolute;
          top: calc(100% + 10rpx);
          left: 100rpx;
          color: #5553AA;
          padding: 0 20rpx;
          .uni-popper__arrow{
            left: 75%
          }
          .uni-select__selector-item{
            text-align: center;
            border-bottom: 1rpx solid #BDC3FE;
            text{
              width: 90%;
            }
            &:last-child{
              border-bottom: none;
            }
          }
        }
      }
      .uni-select__input-text {
        color: #5553AA;
        transform: translateX(-20rpx);
        font-size: 24rpx;
      }
      .uni-icons{
        display: none;
      }
    }
  }
  .goodsbox{
    margin: 20rpx 0;
    .itembox{
      height: 152rpx;
      width: 96%;
      padding: 25rpx 0;
      border-bottom: 1px solid #E9EBFE;
      .goods-image{
        width: 152rpx;
        height: 152rpx;
        border-radius: 24rpx;
        margin-right: 36rpx;
      }
      .txtbox{
        height: 100%;
        width: 100%;
        .name{
          color: #8678CB;
          font-size: 30rpx;
        }
        .doc{
          color: #A99CE6;
          font-size: 26rpx;
        }
        .location{
          width: 100%;
          color: #A99CE6;
          font-size: 20rpx;
          image{
            width: 22rpx;
            height: 22rpx;
            margin-right: 3rpx;
          }
          .value{
            font-size: 24rpx;
          }
        }
      }
    }
    /* 没有更多了 */
    .no-more {
      font-size: 24rpx;
      color: #5750B0;
      padding: 20rpx 0;
      text-align: center;
    }
  }
}
</style>
